<!--  -->
<template>
  <div class='ManualExit'>
    <el-dialog
      title="待出场车辆信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="centerbody">
        <div>
          <p>车辆RFID:</p>
          <p>{{form.rfId}}</p>
        </div>
        <div>
          <p>车架号:</p>
          <p>{{form.carFrameNo}}</p>
        </div>
        <div>
          <p>商家:</p>
          <p>{{form.name}}</p>
        </div>
        <div>
          <p>联系人:</p>
          <p>{{form.phone}}</p>
        </div>
        <div>
          <p>车辆品牌:</p>
          <p>{{form.carBrand}}</p>
        </div>
        <div>
          <p>车辆类型:</p>
          <p>{{form.carType}}</p>
        </div>
        <div>
          <p>授权信息:</p>
          <p class="redName">{{form.businessAuth===0?'商家未授权':'商家已授权'}}</p>
        </div>
        <div>
          <p>是否收费:</p>
          <p class="redName">{{form.isFeeRequire?'是':'否'}}</p>
        </div>
        <div>
          <p>是否金融车:</p>
          <p class="redName">{{form.isFinanceCar?'是':'否'}}</p>
        </div>
        <div>
          <p>停车费:</p>
          <p class="redName">{{form.parkingFee}}元</p>
        </div>
        <div v-if="form.carStatus==='2'||form.carStatus==='1'">
          <el-form
            ref="infoform"
            :model="infoform"
            :rules="rules"
          >
            <el-form-item
              label="出场原因："
              prop="info"
            >
              <el-input
                type="textarea"
                autosize
                v-model="infoform.info"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="handleClose"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="doSubmit"
          icon="el-icon-circle-check"
        >确认出场</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { putObj, CarOut } from '@/api/crcar'
import { ClosePopUp } from '@/api/car/inventory'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      form: {

      },
      infoform: {
        info: ''
      },
      rules: {
        info: [
          { required: true, message: '请输入出场原因', trigger: 'blur' },
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    doSubmit () {
      if (this.form.carStatus == 2 || this.form.carStatus == 1) {
        this.$refs['infoform'].validate((valid) => {
          if (valid) {
            this.changeStatus()
          }
        });
      } else {
        // if (!this.form.businessAuth) {
        //   this.$message.warning("商户未授权")
        // } else {
        this.changeStatus()
        // }
      }
    },
    changeStatus () {
      this.form.carStatus = '4'
      CarOut({ id: this.form.id, info: this.infoform.info }).then(res => {
        this.dialogVisible = false
        this.$emit("refresh")
        this.$message.success("出场成功")
      })
    },
    handleClose () {
      ClosePopUp(this.form.id).then(res => {

      })
      this.dialogVisible = false
      this.$emit("restartTime")
    },
    init (item) {
      this.dialogVisible = true
      this.form = item
      this.infoform.info = ''
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.centerbody {
  padding: 0px 50px;
  div {
    display: flex;
    p:first-child {
      text-align: right;
      width: 100px;
    }
    p:last-child {
      margin-left: 10px;
    }
  }
}
.redName {
  color: red;
}
</style>